import { t } from 'i18next'
import React, { useRef } from 'react'
import { StyledMccMtInfo, ProgressBtnIcon, MicIcon, SpeakerIcon, MicNoIcon, SpeakerNoIcon } from './style'
import { RightWrap } from '../../components'
import useHookData from './hooks'
import { IconCopy } from '@/components/Icon'
import { Rules, createRange } from '@/utils'
import copy from 'copy-to-clipboard'
import { Slider, Switch } from '@kedacom/react-next'
import { useMccStore } from '../../store'

const strokeColor = '#007ac0'

const MccMtInfoView = () => {
	const {
		mt,
		mtInfo,
		cometdMccMtInfo,
		mic,
		speaker,
		showByMtWhenInit,
		mtDetail,
		config,
		isSubMtOffline,
		...useData
	} = useHookData()
	const mtName = mtInfo?.name || mtInfo?.account
	const is255 = mtInfo?.mt_ip === '255.255.255.255'
	const ipText = is255 ? t('V6终端') : mtInfo?.mt_ip || ''
	const isIPV6 = Rules.checkIsIP6(ipText)
	const _href = is255 ? 'javascript:void(0);' : isIPV6 ? `http://[${mtInfo?.mt_ip}]` : 'http://' + mtInfo?.mt_ip || ''
	const nameRef = useRef(null)
	const telRef = useRef(null)
	const ipRef = useRef(null)
	return (
		<StyledMccMtInfo className="mcc-mt-info-wrap">
			<RightWrap
				title={t('终端信息')}
				onBack={() => {
					useMccStore.getState().setCurPage('mcc_main')
				}}
			>
				<div className="info-item mic-info">
					<span className="label">{t('麦克风')}</span>
					{mic?.isMute ? (
						<MicNoIcon
							className={isSubMtOffline ? 'mic-icon offline-disabled' : 'mic-icon'}
							title={t('取消哑音')}
							onClick={() => !isSubMtOffline && useData.onToggleMicBtn(0)}
						></MicNoIcon>
					) : (
						<MicIcon
							className={isSubMtOffline ? 'mic-icon offline-disabled' : 'mic-icon'}
							title={t('设置哑音')}
							onClick={() => !isSubMtOffline && useData.onToggleMicBtn(1)}
						></MicIcon>
					)}
					<Slider
						className="slider"
						disabled={isSubMtOffline}
						value={mic.changeValue || mic.value}
						strokeColor={strokeColor}
						width={config.MAX_bar_length}
						onChange={(val) => {
							useData.onSliderChange(val, 'micValue')
						}}
						onClick={(val) => {
							useData.onSliderChangeEnd(val, 'micValue')
						}}
						onDragEnd={(e: MouseEvent, val: number) => {
							useData.onSliderChangeEnd(val, 'micValue')
						}}
					>
						{(active) => <ProgressBtnIcon className={active ? 'active' : ''} />}
					</Slider>
					<span>{mic.changeValue || mic.value}%</span>
				</div>
				<div className="info-item speaker-info">
					<span className="label">{t('扬声器')}</span>
					{speaker?.isSilence ? (
						<SpeakerNoIcon
							className={isSubMtOffline ? 'speaker-icon offline-disabled' : 'speaker-icon'}
							title={t('取消静音')}
							onClick={() => !isSubMtOffline && useData.onToggleSpeakerBtn(0)}
						></SpeakerNoIcon>
					) : (
						<SpeakerIcon
							className={isSubMtOffline ? 'speaker-icon offline-disabled' : 'speaker-icon'}
							title={t('设置静音')}
							onClick={() => !isSubMtOffline && useData.onToggleSpeakerBtn(1)}
						></SpeakerIcon>
					)}
					<Slider
						className="slider"
						disabled={isSubMtOffline}
						value={speaker.changeValue || speaker.value}
						strokeColor={strokeColor}
						width={config.MAX_bar_length}
						onChange={(val) => {
							useData.onSliderChange(val, 'speakerValue')
						}}
						onClick={(val) => {
							useData.onSliderChangeEnd(val, 'speakerValue')
						}}
						onDragEnd={(e: MouseEvent, val: number) => {
							useData.onSliderChangeEnd(val, 'speakerValue')
						}}
					>
						{(active) => <ProgressBtnIcon className={active ? 'active' : ''} />}
					</Slider>
					<span>{speaker.changeValue || speaker.value}%</span>
				</div>
				<div className="info-item mt-name-info">
					<span className="label">{t('终端名称', { context: 'SC1' })}</span>
					<span className="value-wrap value-icon" ref={nameRef}>
						<span className="value" title={mtName}>
							{mtName}
						</span>
						<IconCopy
							className="copy-icon"
							title={t('复制终端名称')}
							onClick={() => {
								copy(mtName || '') && createRange(nameRef.current)
							}}
						></IconCopy>
					</span>
				</div>
				<div className="info-item mt-number-info">
					<span className="label">{t('终端号码')}</span>
					<span className="value-wrap value-icon" ref={telRef}>
						<span className="value">{mtInfo?.account}</span>
						<IconCopy
							className="copy-icon"
							title={t('复制终端号码')}
							onClick={() => {
								copy(mtInfo?.account || '') && createRange(telRef.current)
							}}
						></IconCopy>
					</span>
				</div>
				<div className="info-item mt-ip-info">
					<span className="label">{t('终端IP')}</span>
					<span className="value-wrap value-icon" ref={ipRef}>
						<a className={`value ${is255 ? 'normal' : 'link'}`} href={_href}>
							{ipText}
						</a>
						<IconCopy
							className="copy-icon"
							title={t('复制终端IP')}
							onClick={() => {
								copy(ipText || '') && createRange(ipRef.current)
							}}
						></IconCopy>
					</span>
				</div>
				{useData.check.isShowCheckDetailInfo && showByMtWhenInit.isShowTerminalCheckTitleAndStatusText && (
					<div className="title-wrap">
						<b className="title">{t('终端检测')}</b>
						{useData.check.isShowCheckStatusText && (
							<span className={`checking-result ${useData.check.status}`}>{useData.check.text}</span>
						)}
					</div>
				)}
				{useData.check.isShowCheckDetailInfo && (
					<>
						<div className="info-item event-time-info">
							<span className="label">{t('发生时间')}</span>
							<span className="value-wrap">
								<span className="value">{useData.check.eventTime}</span>
							</span>
						</div>
						<div className="info-item checking-description-info">
							<span className="label">{t('异常问题')}</span>
							<span className="value-wrap">
								<span className="value">{useData.check.description}</span>
							</span>
						</div>
						<div className="info-item checking-suggestion-info">
							<span className="label">{t('解决方案')}</span>
							<span className="value-wrap" title={useData.check.suggestion}>
								<span className="value">{useData.check.suggestion}</span>
							</span>
						</div>
					</>
				)}
				{showByMtWhenInit.isShowCallInfoTitle && (
					<div className="title-wrap">
						<b className="title">{t('呼叫信息')}</b>
					</div>
				)}
				<div className="info-item">
					<span className="label">{t('呼叫码率')}</span>
					<span className="value-wrap">
						<span className="value">{mtInfo?.bitrate ? mtInfo?.bitrate + ' Kbps' : ''}</span>
					</span>
				</div>
				{showByMtWhenInit.isShowProtocol && (
					<div className="info-item">
						<span className="label">{t('呼叫协议')}</span>
						<span className="value-wrap">
							<span className="value">{mtInfo?.protocol || cometdMccMtInfo?.protocol}</span>
						</span>
					</div>
				)}
				<div className="info-item">
					<span className="label">{t('呼叫方式', { context: 'SC1' })}</span>
					<span className="value-wrap">
						<span className="value">{useData.mtInfoExt.callMethod}</span>
					</span>
				</div>
				{useData.mtInfoExt.isShowCallInterval && (
					<div className="info-item">
						<span className="label"></span>
						<span className="value-wrap">
							<span className="label">{t('呼叫间隔')}</span>
							<span className="value">{useData.mtInfoExt.callInterval}</span>
						</span>
					</div>
				)}
				{useData.mtInfoExt.isShowCallTime && (
					<div className="info-item">
						<span className="label"></span>
						<span className="value-wrap">
							<span className="label">{t('呼叫次数 ')}</span>
							<span className="value">{useData.mtInfoExt.callTime}</span>
						</span>
					</div>
				)}
				{showByMtWhenInit.isShowCallChase && (
					<div className="info-item">
						<span className="label">{t('追呼')}</span>
						<span className="value-wrap">
							<Switch
								width={40}
								height={22}
								checked={useData.mtInfoExt.callChase}
								onChange={(e, v) => {
									useData.onCallChaseChange(v)
								}}
							/>
						</span>
					</div>
				)}
				{showByMtWhenInit.isShowTerminalSendingReceivingTitle && (
					<div className="title-wrap">
						<b className="title">{t('终端发送/接收')}</b>
					</div>
				)}
				<div className="info-item mt-info-wrap__i18n">
					<span className="label">{t('音频源')}</span>
					<span className="value-wrap">
						<span className="value">{useData.mtInfoExt.videoSource}</span>
					</span>
				</div>
				<div className="info-item mt-info-wrap__i18n">
					<span className="label">{t('视频源')}</span>
					<span className="value-wrap">
						<span className="value">{useData.mtInfoExt.radioSource}</span>
					</span>
				</div>
				<div className="info-item mt-info-wrap__i18n">
					<span className="label">{t('音频')}</span>
					<span className="value-wrap">
						<span className="value">{useData.audioFrequency}</span>
					</span>
				</div>
				<div className="info-item mt-info-wrap__i18n">
					<span className="label">{t('主流(发送)')}</span>
					<span className="value-wrap">
						<span className="value">
							{mtDetail?.v_snd_chn
								? (mtDetail?.v_snd_chn.bitrate || 0) + ' Kbps ' + (mtDetail?.v_snd_chn.resolution || '')
								: ''}
						</span>
					</span>
				</div>
				<div className="info-item mt-info-wrap__i18n">
					<span className="label">{t('内容共享(发送)')}</span>
					<span className="value-wrap">
						<span className="value">
							{mtDetail?.dv_snd_chn
								? (mtDetail?.dv_snd_chn.bitrate || 0) +
								  ' Kbps ' +
								  (mtDetail?.dv_snd_chn.resolution || '')
								: ''}
						</span>
					</span>
				</div>
				<div className="info-item mt-info-wrap__i18n">
					<span className="label">{t('主流(接收)')}</span>
					<span className="value-wrap">
						<span className="value">
							{mtDetail?.v_rcv_chn
								? (mtDetail?.v_rcv_chn.bitrate || 0) + ' Kbps ' + (mtDetail?.v_rcv_chn.resolution || '')
								: ''}
						</span>
					</span>
				</div>
				<div className="info-item mt-info-wrap__i18n">
					<span className="label">{t('内容共享(接收)')} </span>
					<span className="value-wrap">
						<span className="value">
							{mtDetail?.dv_rcv_chn
								? (mtDetail?.dv_rcv_chn.bitrate || 0) +
								  ' Kbps ' +
								  (mtDetail?.dv_rcv_chn.resolution || '')
								: ''}
						</span>
					</span>
				</div>
				{showByMtWhenInit.isShowTerminalReceivingPacketLossRate && (
					<>
						<div className="title-wrap ">
							<b className="title">{t('终端接收丢包率')}</b>
						</div>
						<div className="info-item mt-info-wrap__i18n">
							<span className="label">{t('主流视频')}</span>
							<span className="value-wrap">
								<span className="value">
									{mtDetail?.pkts_loss_rate ? mtDetail?.pkts_loss_rate.v_rcv_pkts_loss_rate || 0 : 0}%
								</span>
							</span>
						</div>
						<div className="info-item mt-info-wrap__i18n">
							<span className="label">{t('主流音频')}</span>
							<span className="value-wrap">
								<span className="value">
									{mtDetail?.pkts_loss_rate ? mtDetail?.pkts_loss_rate.a_rcv_pkts_loss_rate || 0 : 0}%
								</span>
							</span>
						</div>
						<div className="info-item mt-info-wrap__i18n">
							<span className="label">{t('内容共享视频')}</span>
							<span className="value-wrap">
								<span className="value">
									{mtDetail?.pkts_loss_rate ? mtDetail?.pkts_loss_rate.dv_rcv_pkts_loss_rate || 0 : 0}
									%
								</span>
							</span>
						</div>
					</>
				)}
				{showByMtWhenInit.isShowTerminalSendingPacketLossRate && (
					<>
						<div className="title-wrap">
							<b className="title">{t('终端发送丢包率')}</b>
						</div>
						<div className="info-item mt-info-wrap__i18n">
							<span className="label">{t('主流视频')}</span>
							<span className="value-wrap">
								<span className="value">
									{mtDetail?.pkts_loss_rate ? mtDetail?.pkts_loss_rate.v_snd_pkts_loss_rate || 0 : 0}%
								</span>
							</span>
						</div>
						<div className="info-item mt-info-wrap__i18n">
							<span className="label">{t('主流音频')}</span>
							<span className="value-wrap">
								<span className="value">
									{mtDetail?.pkts_loss_rate ? mtDetail?.pkts_loss_rate.a_snd_pkts_loss_rate || 0 : 0}%
								</span>
							</span>
						</div>
						<div className="info-item mt-info-wrap__i18n">
							<span className="label">{t('内容共享视频')}</span>
							<span className="value-wrap">
								<span className="value">
									{mtDetail?.pkts_loss_rate ? mtDetail?.pkts_loss_rate.dv_snd_pkts_loss_rate || 0 : 0}
									%
								</span>
							</span>
						</div>
					</>
				)}
			</RightWrap>
		</StyledMccMtInfo>
	)
}
export default MccMtInfoView
